// 通过connect把 state 和 dispatch 通过 props属性垂直映射到 ui组件
import { connect } from "react-redux"
import Cart from "../components(UI组件)/cart"

// 1.映射state

// 此函数用于渲染购物车state
const getCartItem = (state) => {
    let cart = state.cartReducer.items;
    console.log(cart)
    return cart.map(item => {
        // 获取productsReducer的状态值。
        let products = state.productsReducer.all
        let res = products.find(productItem => item.id === productItem.id)
        return {
            title:res.title,
            price:res.price,
            quantity:item.quantity,
            id:item.id
        }
    })
}

// 此方法用于计算总价
const calculator = (state) => {
    let cart = state.cartReducer.items;
    return cart.reduce((total,item) => {
        return total = total + item.price * item.quantity
    },0)
}

const mapStateToProps = (state) => {
    // 使用cartReducer里面的状态进行map，然后查找对应的值。
    return {
        cartItem:getCartItem(state),
        total:calculator(state)
        // cartItem有值了，就可以渲染了。
    }
}

// 2.映射dispatch
const mapDispatchToProps = (dispatch) => {
    return {}
}

// 高阶组件：

let CartContainer = connect(mapStateToProps,mapDispatchToProps)(Cart)
export default CartContainer